<template>
  <div>
    <div style="padding-left: 30px;padding-right: 30px" >
      <el-form :inline="true" :model="optLoginDto"  class="demo-form-inline">

        <el-row :gutter="20">
          <el-col :span="8">
            <!--输入框-->
            <el-form-item label="操作人：">
              <el-input v-model="optLoginDto.name"  placeholder="操作人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="ip：">
              <el-input v-model="optLoginDto.ip" placeholder="ip"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <!--        date-->
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!--查询按钮-->
            <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <!--      表格显示-->
      <el-table :data="Data" border style="width: 100%" ref="multipleTable" >
        <el-table-column
          prop="userName"
          label="操作人"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="requestUrl"
          label="请求路径"
        ></el-table-column>
        <el-table-column
          prop="httpMethod"
          label="请求类型"
        ></el-table-column>
        <el-table-column
          prop="requestIp"
          label="ip"
        ></el-table-column>

        <el-table-column
          prop="actionMethod"
          label="请求方法"
        ></el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
        ></el-table-column>
        <el-table-column
          prop="consumingTime"
          label="消耗时间"
        ></el-table-column>
        <el-table-column
          prop="ua"
          label="浏览器"
        ></el-table-column>


        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="sear(scope.row.id)" type="text" size="small">查看</el-button>
            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="size"
        @current-change="curren"
        :current-page="optLoginDto.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

<!--      查看抽屉-->

      <el-drawer
        :title="this.table"
        :visible.sync="drawer"
        :with-header="true">
        <el-divider></el-divider>
        <div style="margin: 0 50px;">
          <span class="span">执行方法：</span>
          <el-card shadow="always" class="custom-card">
            {{this.classPath}}
          </el-card>

          <span class="span">请求参数：</span>
          <el-card shadow="always" class="custom-card">
            {{this.params}}
          </el-card>

          <span class="span">响应信息：</span>
          <el-card shadow="always" class="custom-card">
            {{this.chakan }}
          </el-card>
        </div>

      </el-drawer>
    </div>
  </div>
</template>



<script>
import{ pageOptLog ,delOptLog,optLogId} from '@/api/pd-auth/developer/opdLog'
export default {
  data(){
    return{
      drawer: false,
      chakan:[],
      value1:'',
      optLoginDto:{
        user_name:'',
        request_ip:'',
        beginTime:'',
        endTime:'',
        pageNum:1,
        pageSize:10,
      },
      Data:[],
      table:'',
      classPath:'',
      total:0,
      params:'',


    }
  },

  //创建生命周期
  created() {
    this.page()
  },
  methods:{

    //页面加载方法
    page(){
      if (this.value1===null) {
        this.loginLogDto.beginTime = ''
        this.loginLogDto.endTime = ''
      }else {
        if (this.value1 != null) {
          this.optLoginDto.beginTime = this.value1[0]
          this.optLoginDto.endTime = this.value1[1]
        }
      }
      pageOptLog(this.optLoginDto).then(as=>{
        this.total=as.data.total
        this.Data=as.data.list
      })
    },

    //查看
    sear(val){
      optLogId(val).then(as=>{
        this.chakan=as
        this.table=as.data.description
        this.classPath=as.data.classPath
        this.params=as.data.params
        console.log(this.chakan)
      })
      this.drawer=true
    },

    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOptLog(id)
        this.total2()
        this.page()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //判断删除的数据是否为最后一页且最后一页只有一条数据
    total2(){
      pageOptLog(this.optLoginDto).then(as=>{
        if (this.total!=as.data.total() && this.optLoginDto.pageNum==this.total && this.total!=1){
          this.total=this.optLoginDto.pageNum-1
        }
      })
    },


    size(val) {
      this.optLoginDto.pageSize = val
      this.page()
    },

    curren(val) {
      this.optLoginDto.pageNum=val
      this.page()
    },

   },


}
</script>

<style>
    .span{
      margin-bottom: 20px; /* 下边距为10像素，可以根据需要调整 */
      margin-top: 20px;
      display: block; /* 将span元素设为块级元素，占据一行 */
    }

    .custom-card {
      background-color: #7edaca; /* 设置为更深的颜色，可以根据需要调整 */
      color: #110303; /* 设置文本颜色为白色，以增加对比度 */
    }
</style>
